<template>
	<view>
		<u-navbar :is-back='false' :title-bold='true' title-color="black" :border-bottom='false' title="通讯录"
			:is-fixed="true" :placeholder="true"> </u-navbar>
		<u-toast ref="uToast" />
		<u-mask z-index="1000" :custom-style="{background: 'rgba(0, 0, 0, 0.1)'}" :show="maskShow"
			@click="maskClick"></u-mask>
		<!-- 顶部搜索栏-start -->
		<view class="search">
			<view class="search-box">
				<u-search @search="search()" :show-action='false' v-model="keywords" class="search-box-u-search"
					placeholder="搜索好友、专业人士、职业、专家" :clearabled="true" :animation="true"></u-search>
				<!-- <view @click="toggleMessageMenu" class="message-menu">
					<u-icon class="message-menu-icon" name="plus" :class="messageMenu.show ? 'im-bg-grey':''" color="#3f3f3f" size="40"></u-icon>
					<view v-if="messageMenu.show" :style="{top: messageMenu.top, left: messageMenu.left}" class="message-menu-box popup-menu">
						<navigator class="popup-menu-item" url="/sub/search/new-contact" open-type="navigate">加好友/群</navigator>
						<navigator url="/sub/pick-user/pick-user?action=create-group" open-type="navigate">
							<view class="popup-menu-item">创建群聊</view>
						</navigator>
					</view>
				</view> -->
				<view class="message-menu">
					<!-- <u-icon name="scan"  color="#646464" size="45" ></u-icon> -->
					<navigator class="popup-menu-item" url="/sub/search/new-contact" open-type="navigate">
						<u-icon class="message-menu-icon" name="plus" :class="messageMenu.show ? 'im-bg-grey':''"
							color="#3f3f3f" size="40"></u-icon>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 顶部搜索栏-end -->
		<view class="address-list">

			<view v-if="user.job==1" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.doctor,'&title=有证专业人士')">
				<image class="address-avatar" src="../../static/img/youzheng.png" mode="widthFix"></image>
				<view class="address-info">有证专业人士({{count.youzheng_count}})</view>
			</view>
			<!-- <view class="address-item" v-if="user.job==1"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.not_seen_doctor,'&title=待见面专业人士')">
				<image class="address-avatar" src="../../static/img/youzheng.png" mode="widthFix"></image>
				<view class="address-info">待见面专业人士</view>
			</view> -->
			<view v-if="user.job==1" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.friend,'&title=好友')">
				<image class="address-avatar" src="../../static/img/friend.png" mode="widthFix"></image>
				<view class="address-info">扫码好友({{count.saoma_count}})</view>
			</view>
			<view class="address-item" v-if="user.job==1"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.stranger,'&title=陌生添加')">
				<image class="address-avatar" src="../../static/img/friend.png" mode="widthFix"></image>
				<view class="address-info">陌生添加({{count.mosheng_count}})</view>
			</view>
			<!-- 护航员端 -->
			<view v-if="user.job==2" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.doctor,'&title=专业人士')">
				<image class="address-avatar" src="../../static/img/youzheng.png" mode="widthFix"></image>
				<view class="address-info">专业人士({{count.zhuanye_count}})</view>
				
			</view>
			<view v-if="user.job==2" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.advice,'&title=见面用户')">
				<image class="address-avatar" src="../../static/img/friend.png" mode="widthFix"></image>
				<view class="address-info">见面用户({{count.relation_count}})</view>
			</view>
			<view v-if="user.job==2" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.thank,'&title=缴费用户')">
				<image class="address-avatar" src="../../static/img/jf.png" mode="widthFix"></image>
				<view class="address-info">缴费用户({{count.thank_count}})</view>
			</view>
			<!-- 	<view v-if="user.job==2" class="address-item"
				@click="go('/sub/address-list/top-contacts?menu=',ws.menu.custom,'&title=慕名粉丝')">
				<image class="address-avatar" src="../../static/img/swml.png" mode="widthFix"></image>
				<view class="address-info">慕名粉丝</view>
			</view> -->
			<navigator class="address-item" url="/sub/session-info/notice-session-info?service_id=1">
				<image class="address-avatar" src="../../static/img/new_friends.png" mode="widthFix"></image>
				<view class="address-info">新的朋友</view>
			</navigator>
		</view>
		<!-- 联系人-start -->
				<u-index-list :scrollTop="scrollTop" :indexList="indexList" >
				<view  v-for="(item, index) in list" :key="index">
					<u-index-anchor :custom-style="{'background-color': '#FFF',margin: '10rpx 0'}" :index="item.key" />
					<navigator :url="(itm.job==1||itm.job=='1')?'/sub/center/mine/userInfo?id='+ itm.user_id : '/sub/center/mine/userInfo?id=' + itm.user_id"  v-for="(itm,idx) in item.value" :key="idx">
						<view  class="address-item" >
							<image class="address-avatar" :src="itm.avatar" mode="widthFix"></image>
							<view class="address-info">
							{{itm.nickname}}
							<label style="font-size: 11px;color: darkgray;margin-left: 3%;">{{itm.bio}}</label>
							
							</view>
						</view>
					</navigator>
				</view>
		</u-index-list>
		<!-- 联系人-end -->
		<!-- 跑马灯 -->
		
		<view class="notice">
<!-- 			<u-notice-bar v-if="show" color='#A1ADB0' bg-color='#ffffff' :volume-icon="false" :is-circular="true"
				:mode="list2.length>1?'vertical':'horizontal'" :list="list2" :close-icon="true"
				@close='close'></u-notice-bar> -->
				<u-notice-bar v-if="show" color='#A1ADB0' bg-color='#ffffff' :volume-icon="false" :is-circular="true"
					:mode="'horizontal'" :list="list2" :close-icon="true"
					@close='close'></u-notice-bar>
			<view class="noticeShow" @click="show=true" v-else>
				<span>平台分享</span>
				<image src="../../static/img/lookgg.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		aroundNotice,
		getUserList
	} from '../../api/index.js'
	export default {
		data() {
			return {
				keywords: '',
				maskShow: false,
				messageMenu: {
					show: false
				},
				count:{
					thank_count:0,
					relation_count:0,
					zhuanye_count:0,
					saoma_count:0,
					youzheng_count:0,
					mosheng_count:0
				},
				scrollTop: 1,
				indexList: [],
				friends: [],
				list: [],
				user: {},
				list2: [],
				show: true
			}
		},
		watch: {
			friends: {
				handler(newVal) {
					this.init(newVal)
				},
				// 立即处理 进入页面就触发
				immediate: true,
				// 深度监听 属性的变化
				deep: true
			},


		},
		onLoad() {
			this.ws.pageFun(this.pageDataLoad, this);
			
			// console.log( this.ws.buildUrl('ws'),'ws地址');
			// uni.navigateTo({
			// 	url:'/sub/prescription/medication'
			// })
		},
		onShow: function() {
			this.getNotice()
			this.getUserList()
			this.user = this.ws.getUserInfo()
			console.log(this.user);
			this.ws.checkNetwork(this)
			// if (this.ws.pageRefresh.addressList) {
			// 	// 被其他页面通知刷新此页
			// 	this.ws.pageFun(this.pageDataLoad, this);
			// 	this.ws.pageRefresh.addressList = false
			// 	return;
			// }
			if (true) {
				// 被其他页面通知刷新此页
				this.ws.pageFun(this.pageDataLoad, this);
				this.ws.pageRefresh.addressList = false
				return;
			}
			
			console.log(this.list, '通讯录');
		},
		onPullDownRefresh: function() {
			this.ws.pageFun(this.pageDataLoad(true), this);
			this.ws.onMessageCallBack.set('load_contact', (msg) => {
				if (msg.data.data.method == 'all-friend' && msg.data.data.refresh) {
					this.$refs.uToast.show({
						title: '刷新成功~',
						type: 'success'
					})
					uni.stopPullDownRefresh()
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			goto(){
			uni.scanCode({
				onlyFromCamera:true,
				success:function(res){
					console.log('res',res)
					uni.switchTab({
						url: res.path
					})
				}
			})	
			},
			go(url, e, v) {
				uni.navigateTo({
					url: url + e + v
				})
			},
			getNotice() {
				aroundNotice().then(res => {
					if (res.code == 1) {
						this.list2 = res.data.list.map(obj => '平台分享：' + obj.content);
					}
				})
			},
			getUserList() {
				
				getUserList().then(res => {
					if (res.code == 1) {
						this.count=res.data;
						console.log('this.count',this.count)
					}
				})
			},
			init(a) {
				this.list = Object.keys(a).map(key => ({
					key: key,
					value: a[key]
				}))
			},
			pageDataLoad: function(refresh = false) {
				this.ws.send({
					c: 'User',
					a: 'loadContact',
					data: {
						'method': 'all',
						'refresh': refresh
					}
				})
			},
			maskClick: function() {
				this.messageMenu.show && this.toggleMessageMenu()
			},
			toggleMessageMenu: function(e) {
				var that = this
				if (that.messageMenu.show) {
					that.maskShow = false
					that.messageMenu.show = false
					return;
				}
				that.messageMenu = {
					show: true,
					top: (e.detail.y + 14) + 'px',
					left: (e.detail.x - 120) + 'px'
				}
				that.maskShow = true
			},
			search: function() {
				console.log(this.keywords, '搜索');
				if (!this.keywords) {
					this.$refs.uToast.show({
						title: '请输入关键词~',
						type: 'error'
					})
					return;
				}
				uni.navigateTo({
					url: '/sub/search/search?keywords=' + this.keywords,
					success: () => {
						this.keywords = ''
					}
				})
			},

			close() {
				this.show = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.notice {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		display: flex;
		justify-content: flex-end;

		.noticeShow {
			width: 165rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 4px 8px 0px rgba(59, 129, 147, 0.1);
			border-radius: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 30px;
			width: 83px;
			padding: 10rpx;
			font-size: 12px;
			color: #A1ADB0;

			image {
				width: 9.5px;
				margin-left: 10rpx;
			}
		}

		u-notice-bar {
			width: 100vw;
		}
	}

	.search {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
	}

	.search-box {
		display: flex;
		align-items: center;
		padding: 20rpx 0 10rpx 0;
	}

	.search-box .search-box-u-search {
		width: 616rpx;
	}

	.search-box .message-menu {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}

	.message-menu .message-menu-icon {
		padding: 6rpx;
		z-index: 1001;
		border-radius: 4px;
	}

	.message-menu-box {
		position: absolute;
		background: $--white;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		border-radius: 4px;
		padding: 10rpx 20rpx;
		z-index: 1001;
	}

	.popup-menu .popup-menu-item {
		padding: 20rpx 50rpx;
		text-align: center;
		border-bottom: 1px solid #F3F4F6;
	}

	.popup-menu .popup-menu-item:last-child {
		border: none;
	}

	.address-item {
		height: 120rpx;
		display: flex;
		align-items: center;
		padding: 0rpx 4%;
	}

	.address-avatar {
		height: 80rpx;
		width: 80rpx;
		border-radius: 16rpx;
	}

	.address-info {
		flex: 1;
		height: 120rpx;
		line-height: 120rpx;
		margin-left: 20rpx;
		font-size: 32rpx;
		border-bottom: 1px solid rgba(241, 241, 241, 0.6);
	}

	.im-bg-grey {
		background-color: $--grey;
		color: $--white;
	}
</style>